import { memo, useEffect, useRef, useState } from "react";
import "./assets/modal.scss";
interface modalCreateProps {
    name: string;
    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
    onConfirm: ({
        id,
        name,
        category_id,
        description,
        final_group,
    }: {
        id?: number;
        name?: string;
        category_id?: number;
        description?: string;
        final_group?: boolean;
    }) => void;
    needDescription?: boolean;
    edit?: {
        id: number;
        name: string;
        category_id?: number;
        description?: string;
        final_group?: boolean;
    };
}
const ModalCreate = memo(({ name, setOpen, onConfirm, needDescription = false, edit }: modalCreateProps) => {
    const nameInputRef = useRef<HTMLInputElement>(null);
    const descriptionInputRef = useRef<HTMLTextAreaElement>(null);
    const modalRef = useRef<HTMLDivElement>(null);
    const [description, setDescription] = useState(edit?.description || "");
    const final_group = useRef<HTMLInputElement>(null);
    useEffect(() => {
        if (nameInputRef.current && edit) nameInputRef.current.value = edit.name;
        if (descriptionInputRef.current && edit) descriptionInputRef.current.value = edit.description || "";
        if (final_group.current && edit) final_group.current.checked = edit.final_group || false;
    }, [nameInputRef, descriptionInputRef, edit]);
    return (
        <div
            className='modal-create'
            ref={modalRef}
            onClick={(e) => {
                if (e.target === modalRef.current) {
                    setOpen(false);
                }
            }}
        >
            <div className='modal-create__main'>
                <div className='modal-create__header'>
                    <h1>{edit ? "Edit " + name.toLocaleLowerCase() : "Create new"}</h1>
                    <button
                        className='modal-create__close-btn'
                        onClick={() => {
                            setOpen(false);
                        }}
                    >
                        X
                    </button>
                </div>
                <input
                    type='text'
                    className='modal-create__name-input'
                    ref={nameInputRef}
                    placeholder={`${name} name`}
                />
                {!needDescription ? (
                    <label style={{ marginTop: "15px" }}>
                        <input type='checkbox' id='final_group' name='final_group' ref={final_group} />
                        <span>Final group?</span>
                    </label>
                ) : null}
                {needDescription ? (
                    <textarea
                        placeholder='Description'
                        ref={descriptionInputRef}
                        className='modal-create__description-input'
                        maxLength={255}
                        onChange={(ev) => {
                            setDescription(ev.target.value);
                        }}
                    />
                ) : null}
                {needDescription ? (
                    <div className='modal-create__description-length'>{description.length}/255</div>
                ) : null}
                {needDescription ? (
                    <div className='modal-create__end-time'>
                        <input type='text' className='modal-create__name-input' placeholder='01.01.1970' />
                        <input type='text' className='modal-create__name-input' placeholder='13:00' />
                    </div>
                ) : null}
                {needDescription ? (
                    <input
                        type='text'
                        className='modal-create__name-input'
                        placeholder='Time spent in hours'
                        style={{ marginTop: "15px", width: "10em" }}
                    />
                ) : null}
                {edit ? <button className='modal-create__confirm-btn'>Delete</button> : null}
                <button
                    className='modal-create__confirm-btn'
                    onClick={() => {
                        onConfirm({
                            id: edit?.id,
                            name: nameInputRef.current?.value,
                            category_id: edit?.category_id,
                            description: descriptionInputRef.current?.value,
                            final_group: final_group.current?.checked,
                        });
                        setOpen(false);
                    }}
                >
                    Confirm
                </button>
            </div>
        </div>
    );
});
export default ModalCreate;
